<template>
  <a-card class="min-h-[68px] rounded my-[10px]" :body-style="{ padding: '0px 10px', minHeight: '700px' }"
    :bordered="false">
    <!-- 头部返回列表功能 -->
    <template #extra>
      <a-button class="border-none" icon="rollback" @click="rollback">{{
        $t("app.setting.themecolor.rr99")
      }}</a-button>
    </template>
    <!-- 正文头部 -->
    <div slot="title">
      <a-space>
        <div class="ty"></div>
        {{ $t("user.verification-code.required1115661105718") }}
      </a-space>
    </div>
    <!-- 头部导航+查看RPA详情 -->
    <div style="margin: 30px 10px 0px 20px">
      <div style="display: flex; justify-content: space-between">
        <!-- 查看详情 -->
        <div style="
              margin-left: 20px;
              margin-top: -6px;
              right: 0;
              position: absolute;
              margin-right: 20px;
              z-index: 5;
            ">
          <rpaDetail :rpaDetailId="id" />
        </div>
      </div>
    </div>
    <div class="card-box">
      <div class="card-left">
        <p class="left-title">
          {{ $t("user.verification-code.required11156611036") }}
        </p>
        <ul style="padding-left: 15px">
          <li v-for="(item, i) in chapterLists" :key="item.title">
            <a-space align="center">
              <a-badge status="processing" style="margin-right: -40px; margin-bottom: 3px" v-if="item.check" />
              <a-button type="link" @click="changeChapter(item, i)">{{ item.title }}
              </a-button>
            </a-space>
          </li>
        </ul>
      </div>
      <!-- 主列表 -->
      <div class="card-right">
        <a-row>
          <a-space class="mb-[15px]">
            <div class="tags"></div>
            {{ $t("user.verification-code.required11156611037") }}
          </a-space>
          <!-- <p>尊敬的用户，因为您的数据处理活动已经完成PIA， 您无需回答DPIA调查问卷</p>
          <p>您可以将此请求提交给 DCO 审批，或者返回 RPA 进行修改。</p> -->
          <!-- <br> -->
          <p> Dear user, you do not need to answer the DPIA questionnaire since you have chosen No Personal Information or
            Important Data Involved in your RPA. </p>
          <p>You can submit this request to DCO for approval, or go back to RPA to modify. </p>
        </a-row>
      </div>
    </div>
    <!-- 下方按钮 -->
    <div class="btns" :style="{
      position: 'absolute',
      right: 0,
      bottom: 0,
      width: '100%',
      borderTop: '1px solid #e9e9e9',
      padding: '20px 16px',
      background: '#fff',
      textAlign: 'center',
      zIndex: 1,
    }">
      <!-- 返回 -->
      <a-button type="primary" @click="saveup()" style="margin-right: 20px">
        {{ $t("app.setting.themecolor.rr") }}
      </a-button>
      <!-- 预览报告 -->
      <!-- <a-button type="primary" @click="viewbook()" style="margin-right: 20px;">{{
          $t('user.verification-code.required111566110577371442281431555') }}</a-button> -->
    </div>
  </a-card>
</template>
  
<script>
import {
  dpiaQuestionChapterLists,
  dpiaQuestionInfo,
  dpiaSimpleAnswer,
  dpiaQuestionChangeStatus,
  dpiaSimpleAction,
} from "@/api/dpia/form";
import RpaDetail from "./components/rpaDetail.vue";
import { userQuery } from "@/api/common/form";
import { quesionFindRpaId, rpaDetail } from "@/api/rpa/form";
export default {
  components: {
    RpaDetail,
  },
  mounted() {
  },
  data() {
    return {
      // 章节答题内容
      columns: [
        {
          title: "题目",
          width: "440px",
          dataIndex: "DpiaChapterTopic",
          align: "center",
        },

        {
          title: "回答内容",
          className: "min-w-30p",
          dataIndex: "DpiaChapterTopicAnswer",
          align: "center",
          scopedSlots: { customRender: "dpiaChapterTopicAnswer" },
        },
      ],
      dco: undefined,
      // DCO列表
      userList: [],
      // DCO按钮
      dcoButtom: false,

      // 上一页按钮控制
      previousPageButtom: true,

      // 下一页按钮控制
      nextPageButtom: true,

      value: "",
      visible: false,

      // 配置分页
      dpiaSimpleAnswerPagination: {
        page: 1,
        pageSize: 10,
        total: 0,
        current: 1,
      },
      dpiaSimpleActionPagination: {
        page: 1,
        pageSize: 1,
        total: 0,
      },

      // 左侧的章节列表
      chapterLists: [],

      // 基础答题信息
      questionnaireInfo: {},

      // 问题和答案数据
      dpiaQuestionTopicAnswer: {},

      // 问卷ID
      id: "",

      // 获取用户问题答案
      dpiaQuestionUserAnswer: {},

      // 当前题型
      topicType: 0,

      // 是否结束
      finishStatus: 0,

      // 已答题的结果
      dpiaQuestionUserLastAnswer: "",

      // 答题章节内容
      dpiaSimpleAnswerLists: [],

      // Action列表
      dpiaSimpleActionLists: [],

      //chapter Id
      chapterId: 0,

      //上一章/下一章
      num: 0,
      lang: localStorage.getItem("lang").includes("zh-CN"),
    };
  },
  created() {
    this.init();
  },
  mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        let lang = JSON.parse(e.value);
        if (lang == "zh-EN") {
          that.lang = false;
        } else {
          that.lang = true;
        }
        // that.changeChapter({ id: that.chapterId }, that.num);

      }
    });
  },
  methods: {
    async changeChapter(items, i) {

      this.dpiaSimpleAnswerPagination = {
        page: 1,
        pageSize: 10,
        total: 1,
      };
      // if (i) {
      //   this.num = i;
      // }
      // // 如果是新的章节，默认给它重置一下
      // // 保障是首次分页
      // // 因为Current默认有效，所以，在重置时记得把current重置为1
      // if (items.id != this.chapterId) {
      //   this.dpiaSimpleAnswerPagination = {
      //     page: 1,
      //     pageSize: 10,
      //     total: 0,
      //     current: 1,
      //   }
      // }
      // this.chapterId = items.id;

      // try {
      //   // 默认获取第一章节
      //   const { data: dpiaSimpleAnswerObject } = await dpiaSimpleAnswer({
      //     id: this.id,
      //     DpiaChapterId: items.id,
      //     lang: this.lang ? 0 : 1,
      //   });
      //   const { Page, PageSize, Total, Lists } = dpiaSimpleAnswerObject;

      //   this.dpiaSimpleAnswerLists = Lists;
      //   this.dpiaSimpleAnswerPagination = {
      //     page: Page,
      //     pageSize: PageSize,
      //     total: Total,
      //   };

      //   const { page, pageSize } = this.dpiaSimpleActionPagination;
      //   // 默认获取第一章节
      //   const { data: dpiaSimpleActionObject } = await dpiaSimpleAction({
      //     Id: this.id,
      //     ChapterId: this.chapterId,
      //     page,
      //     pageSize,
      //   });
      //   const {
      //     Page: page1,
      //     PageSize: pageSize1,
      //     Total: total1,
      //     Lists: Lists1,
      //   } = dpiaSimpleActionObject;

      //   this.dpiaSimpleActionLists = Lists1;
      //   this.dpiaSimpleActionPagination = {
      //     page: page1,
      //     pageSize: pageSize1,
      //     total: total1,
      //   };
      // } catch (error) {
      //   console.log("error:", error);
      //   this.$message.error(error);
      // }
    },
    async init() {
      this.chapterId = 0;
      try {
        // 初始化题库
        var id = this.$route.query.id;
        this.id = id;
        this.dpiaSimpleAnswerLists = [{
          DpiaChapterTopic: "1.\tThis DPIA is triggered by the following reasons: ",
          DpiaChapterTopicAnswer: "Products or services process personal information or important data",
          DpiaChapterTopicId: 165,
          DpiaChapterTopicType: 2,
          Id: 836,
        }]
      } catch (error) {
        console.log("error:", error);
        this.$message.error(error);
      }

    },
    async showModal() {
      this.visible = true;
      // 获取用户列表下拉
      const { data: userList } = await userQuery(1);

      this.userList = userList;
    },
    async handleOk(e) {
      // 交卷
      if (this.dco == undefined) {
        this.$message.error(
          this.$t("user.verification-code.required111566110577268")
        );
        return;
      }
      try {
        console.log("1111");
        await dpiaQuestionChangeStatus({
          Id: this.id,
          DpiaStatus: 2,
          DpiaDcoUserId: this.dco,
        });
        this.$message.success(
          this.$t("user.verification-code.required111566110577270")
        );
      } catch (error) {
        this.$message.error(error);
      }

      this.topicShow();
      this.visible = false;
      // 开启那个结果页
      this.finishStatus = 1;
    },

    rollback() {
      this.$router.push("/dpia/service");
    },

    //返回
    async saveup() {
      this.$router.push({ path: "/dpia/service" });
    },
    //预览报告
    async viewbook() {
      //调接口
      // try {
      //   await rickActiondel({ Id: id })
      //   this.$message.success(this.$t('user.verification - code.required111566110577308'))
      //   this.$router.push({ path: '/dpia' })
      // } catch (error) {
      //   this.$message.error(error)
      // } finally {
      // }
    },
  },
};
</script>
  
<style lang="less" scoped>
/deep/.ant-card-body {
  // display: flex;

  .buttomm {
    width: 100%;
  }

  .card-box {
    font-size: 15.5px;
    display: flex;
  }

  .card-left {
    /*rectangle copy 4备份 87*/
    margin: 20px 30px 20px 20px;
    color: #444e84;
    left: 339px;
    top: 287px;
    width: 388px;
    min-height: 415px;
    opacity: 0.67;
    border-radius: 2px;
    background: #f7faff;

    ul {
      margin-top: 10px;
    }

    ul li {
      padding: 3px;
    }
  }

  .left-title {
    color: #050c34;
    width: 100%;
    line-height: 40px;
    padding: 0 10px;
    padding-left: 20px;
    background: #e7f0ff;
    border-bottom: 1px solid #ddd;
  }

  .card-right {
    width: 100%;
  }

  p {
    color: #000;
  }
}


.tags {
  left: 298px;
  top: 288px;
  width: 6px;
  height: 14px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}
</style>